<template>
    <div class="goodscart-container">
        <div class="goodscart-bg"></div>
        <div class="goodscart">
            <div class="mui-table-view" v-for="item in goodsinfo" :key="item.id">
                <div class="mui-table-view-cell goodsitem">
                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-red">删除</a>
                    </div>
                    <div class="mui-slider-handle itemscon">
                        <mt-switch v-model="$store.getters.getgoodsIdSelected[item.id]" @change="changeswitch(item.id,$store.getters.getgoodsIdSelected[item.id])"></mt-switch>
                        <img :src="item.thumb_path" alt="">
                        <div class="info">
                            <div class="info_tit">{{ item.title }}</div>
                            <div class="info_price">
                                <span>￥{{ item.sell_price }}</span>
                                <cartnumbox :initcount="$store.getters.getgoodsIdCount[item.id]" :goodsid="item.id"></cartnumbox>
                                <!-- 分析：我们如何获取我们在点击加入购物车时的商品数量呢？ -->
                                <!-- 根据cart的商品id去请求回来的购物车数据的商品数量不是我们想要的，或者说是无意义的，因为我们加入的购物车数量并不是请求回来的默认的1 -->
                                <!-- 解决： -->
                                <!-- 我们可以在getters中定义一个方法，来返回一个state的cart的id与count键值对的对象，因为购物车请求的数据id也是在cart里拿的 -->
                                <!-- 所以在购物车页面渲染数据时，我们以循环的商品id作为属性名去读取getters的那个方法返回的对象的数量值 -->
                                <!-- 因为id相同且一一对应，所以能根据 对象[属性名id] 来找到这个该对象对应id的count数量值 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="goodscartbtm">
            <mt-switch v-model="$store.getters.getgoodsAllselected.sel" @change="changeswitchall($store.getters.getgoodsAllselected.sel)">全选</mt-switch>
            <div class="btmflex">
                <span>合计：</span>
                <i>￥{{ $store.getters.getgoodsCountPrice.amount }}</i>
                <mt-button type="danger" size="normal">结算({{ $store.getters.getgoodsCountPrice.count }})</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
// 偶尔简单操作一下 dom，影响不大
// document.querySelector("body").style.background = "#f2f2f2";
import { Toast } from "mint-ui"
import cartnumbox from "../subcomponents/cart_numberbox.vue"

export default {
    created() {
        this.getGoodsinfo();      // 调用获取购物车数据的方法
    },
    data(){
        return {
            goodsinfo:[]      // 购物车数据数组
        }
    },
    methods:{
        changeswitch(id,val){     // 将商品选中状态同步到 store 的 cart 中去
            // console.log(id,val);
            var goodsinfo = {
                id:id,
                selected:val
            }
            this.$store.commit("updateGoodsSelected",goodsinfo);
        },
        changeswitchall(val){     // 底部全选按钮，改变即将商品状态同步到 store 的 cart 中去
            // console.log(val);
            this.$store.commit("updateGoodsselectedAll",val);
        },
        getGoodsinfo(){     // 根据 store 的 cart 的商品id去查询购物车数据，每个id用逗号分隔开
            var idarr = [];
            // 获取 store 的 cart 的商品id
            this.$store.state.cart.forEach(item => {
                idarr.push(item.id);
            });
            // 如果 cart 的 商品id为空，那么就不必执行接口请求了，直接 return 出去不往下执行
            if(idarr.length <= 0){
                return ;
            }
            // idarr.join(",")  表示将数组中的每一项以逗号分隔开
            this.$http.get("api/goods/getshopcarlist/" + idarr.join(",")).then(result => {
                if(result.data.status === 0){
                    this.goodsinfo = result.data.message;
                }else{
                    Toast("获取失败");
                }
            })
            
        }

    },
    components:{
        cartnumbox
    }
}
</script>

<style lang="scss" scoped>
.goodscart-container{
    background:#f2f2f2;
    padding-bottom:50px;
    .goodscart-bg{
        height:150px;
        background:#26a2ff;
    }
    .goodscart{
        margin-top:-70px;
        padding:0 10px 60px 10px;

        .mui-table-view{
            border-radius:10px;
            margin-bottom:10px;
            &:before{
                height:0;
                background:none;
            }
            &:after{
                height:0;
                background:none;
            }
            .goodsitem{
                border-radius:10px;
                padding:10px;
                .itemscon{
                    display:flex;
                    align-items:center;
                    img{
                        width:70px;
                        height:70px;
                        border-radius:8px;
                        margin:0 8px;
                    }
                    .info{
                        display:flex;
                        flex-direction: column;
                        .info_tit{
                            font-size:13px;
                            color:#333;
                            flex:1;
                            text-align:justify;
                            line-height:18px;
                            margin-bottom:5px;
                        }
                        .info_price{
                            display: flex;
                            justify-content:space-between;
                            align-items: center;
                            span{
                                font-size:16px;
                                font-weight:bold;
                                color:#fe8906;
                            }
                        }
                    }
                }
            }
        }
        
    }
    .goodscartbtm{
        display: flex;
        align-items: center;
        justify-content: space-between;
        background:#ffffff;
        height:60px;
        padding:0 10px;
        font-size:16px;
        position:fixed;
        bottom:50px;
        left:0;
        right:0;
        .btmflex{
            display: flex;
            align-items: center;
            i{
                font-style:normal;
                color:#fe8906;
                font-weight:bold;
                margin-right:8px;
            }
        }
    }
}
</style>